<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MiPlanMobile.Behavior"
             xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
             xmlns:behavior="clr-namespace:MiPlanMobile.Behavior;assembly=MiPlanMobile"
             xmlns:convert="clr-namespace:MiPlanMobile.Convert;assembly=MiPlanMobile"
             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:button="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
             xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize"
             x:Class="MiPlanMobile.View.Wizard.WizardPopUpView"
             x:Name="WizardPopUpViewXaml">

    <ContentPage.Resources>
        <ResourceDictionary>

            <DataTemplate x:Key="WizardItemTemplate">
                <ContentPresenter Content="{Binding Template}" />
            </DataTemplate>

            <convert:SelectedIndexChangedConverter x:Key="SelectedIndexChangedConverter" />

        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.ToolbarItems>

        <ToolbarItem Text="home"
                     Order="Primary">

            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="MiPlanLogo.png"
                            Android="MiPlanLogo.png"
                            WinPhone="MiPlanLogo.png" />
            </ToolbarItem.Icon>

        </ToolbarItem>

        <ToolbarItem Order="Primary"
                     Command="{Binding CloseModalCommand}">

            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="Close.png"
                            Android="Close.png"
                            WinPhone="Close.png" />
            </ToolbarItem.Icon>

        </ToolbarItem>

    </ContentPage.ToolbarItems>

    <ContentPage.Content>

        <StackLayout BackgroundColor="{StaticResource BackgroundColor}">

            <rotator:SfRotator EnableLooping="false"
                               NavigationStripMode="Dots"
                               DotPlacement="None"
                               VerticalOptions="FillAndExpand"
                               SelectedIndex="{Binding WizardIndex, Mode=TwoWay}"
                               ItemsSource="{Binding WizardTemplates}"
                               ItemTemplate="{StaticResource WizardItemTemplate}">

                <rotator:SfRotator.Behaviors>

                    <behavior:EventToCommandBehavior EventName="SelectedIndexChanged"
                                                     Converter="{StaticResource SelectedIndexChangedConverter}"
                                                     Command="{Binding WizardSelectedIndexChangedCommand}" />

                </rotator:SfRotator.Behaviors>

            </rotator:SfRotator>

            <listView:SfListView Orientation="Horizontal"
                                 HeightRequest="100"
                                 Padding="2"
                                 ItemSpacing="2"
                                 ItemSize="100"
                                 IsScrollBarVisible="False"
                                 IsStickyFooter="True"
                                 IsStickyHeader="True"
                                 ItemsSource="{Binding SelectorThumbnails}"
                                 TapCommand="{Binding SelectorItemTappedCommand}"
                                 SelectedItem="{Binding SelectorSelectedItem}">

                <listView:SfListView.Behaviors>
                    <local:SelectorListViewBehavior />
                </listView:SfListView.Behaviors>

                <listView:SfListView.ItemTemplate>
                    <DataTemplate>

                        <StackLayout VerticalOptions="FillAndExpand"
                                     BackgroundColor="{StaticResource ButtonColor}">

                            <Image Source="{Binding Image}" />
                            <Label FontSize="10"
                                   Text="{Binding Text}" />
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.ItemTemplate>

                <listView:SfListView.SelectedItemTemplate>
                    <DataTemplate>

                        <StackLayout VerticalOptions="FillAndExpand"
                                     BackgroundColor="LightBlue">

                            <Image Source="{Binding Image}" />
                            <Label FontSize="10"
                                   Text="{Binding Text}" />
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.SelectedItemTemplate>

                <listView:SfListView.HeaderTemplate>
                    <DataTemplate>

                        <StackLayout BackgroundColor="White"
                                     IsVisible="{Binding SelectorScrollLeftIsVisible}">
                            <button:SfButton HorizontalOptions="CenterAndExpand"
                                             VerticalOptions="CenterAndExpand"
                                             Command="{Binding SelectorScrollLeftTappedCommand}">
                                <button:SfButton.Content>
                                    <iconize:IconLabel Text="far-arrow-alt-circle-left"
                                                       FontSize="35" />
                                </button:SfButton.Content>
                            </button:SfButton>
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.HeaderTemplate>

                <listView:SfListView.FooterTemplate>
                    <DataTemplate>

                        <StackLayout BackgroundColor="White"
                                     IsVisible="{Binding SelectorScrollRightIsVisible}">
                            <button:SfButton HorizontalOptions="CenterAndExpand"
                                             VerticalOptions="CenterAndExpand"
                                             Command="{Binding SelectorScrollRightTappedCommand}">
                                <button:SfButton.Content>
                                    <iconize:IconLabel Text="far-arrow-alt-circle-right"
                                                       FontSize="35" />
                                </button:SfButton.Content>
                            </button:SfButton>
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.FooterTemplate>

            </listView:SfListView>

        </StackLayout>

    </ContentPage.Content>

</ContentPage>